Style sheets overview

A style is a group of formatting attributes identified by a single name that controls the formatting of a text block so that changing an attribute of the style instantly reformats all text controlled by the style.

Click Show Me for an animated introduction to creating style sheets in Dreamweaver.

You can open the file created in this ShowMe movie from a browser, or you can open it in Dreamweaver by choosing Help > Open Example and selecting !styles_example.htm.

A style sheet includes all of the styles for a document. Style sheets reside in the HEAD area of a document and define a series of styles. Styles can define the formatting attributes for HTML tags, ranges of text identified by a class attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS guidelines.

Style sheets work in 4.0 (or later) browsers. Internet Explorer 3.0 recognizes some style attributes, but most earlier browsers ignore them. See Converting a file to 3.0 browser compatible for information about converting style sheet information to HTML markup.

Use styles to format a single document, or use an external style sheet (that is, one that is stored externally and linked to the current document) to control several documents at once.

There are two different types of styles in Dreamweaver:

	HTML tag styles redefine the formatting for text in a document controlled by a particular tag, such as H1. When you create a style for the H1 tag, all the text with the H1 tag immediately changes.
	Custom styles define formatting attributes for a text block and can be applied like the styles you use in a word processor. In the HTML code, the text block is identified with a CLASS attribute.

Text formatting that is manually applied to ranges of text can take precedence over styles. To make styles control the formatting for a paragraph, remove all other formatting settings.

Styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. They can also specify unique HTML attributes like positioning, special effects, and mouse rollovers.

Dreamweaver has some style attributes that it cannot render in the Document window. These attributes appear in the Style Definition dialog box with an asterisk (*) next to the name. Dreamweaver also has some attributes that are in the CSS specification, but are not supported by all current browsers. Some attributes are not currently supported by any browsers.

The use of CSS style sheets is evolving rapidly in the web development community. See the Dreamweaver Developers Center for the latest information.